<template>
	<view class="mine-container" :style="{height: `${windowHeight}px`}">
		<!--顶部个人信息栏-->

		<custom-navbar title=""></custom-navbar>

		<view class="header-section">

			<!-- <view class="header">
		       <button class="back-button" @click="handleBack">返回</button>
		     </view> -->
			<view class="   align-center justify-center flex">
				<view v-if="name" @click="handleToInfo" class="user-info">
					<view class="u_title">
						 {{ name }}
					</view>
				</view>

			</view>
			<view class="  align-center justify-center flex">
				<view v-if="!avatar" class="cu-avatar xl round bg-white">
					<view class="iconfont icon-people text-gray icon"></view>
				</view>
				<image v-if="avatar" @click="handleToAvatar" :src="avatar" class="cu-avatar xl round" mode="widthFix">
				</image>
				<view v-if="!name" @click="handleToLogin" class="login-tip">
					点击登录
				</view>

			</view>

		</view>

		<!-- <view class="content-section">
			<view class="mine-actions grid col-4 text-center">
				<view class="action-item" @click="handleWeixin">
					<view class="iconfont icon-friendfill text-pink icon"></view>
					<text class="text">微信相关</text>
				</view>
				<view class="action-item" @click="handleBuilding">
					<view class="iconfont icon-service text-blue icon"></view>
					<text class="text">在线客服</text>
				</view>
				<view class="action-item" @click="handleBuilding">
					<view class="iconfont icon-community text-mauve icon"></view>
					<text class="text">反馈社区</text>
				</view>
				<view class="action-item" @click="handleBuilding">
					<view class="iconfont icon-dianzan text-green icon"></view>
					<text class="text">点赞我们</text>
				</view>
			</view> -->
		<view class="align-left hello">
			<view class="title">早上好!</view>
			<view class="sub-title">健康生活每一天</view>
		</view>
		<view class="menu-list">

			<view class="list-cell  " @click="handleToInfo">
				<view class="menu-item-box">
					<!-- <view class="iconfont icon-user menu-icon"></view> -->
					<u-icon name="file-text" color="#fff" size="20" ></u-icon>
					<view class="menu-text">个人信息</view>
				</view>
			</view>
			<view class="list-cell  " @click="handleToEditInfo">
				<view class="menu-item-box">
					<!-- <view class="iconfont icon-edit menu-icon"></view> -->
					<u-icon name="edit-pen-fill" color="#fff" size="20" ></u-icon>
					<view class="menu-text">编辑资料</view>
				</view>
			</view>
			<view class="list-cell  " @click="handleHelp">
				<view class="menu-item-box">
					<!-- <view class="iconfont icon-help menu-icon"></view> -->
					<u-icon name="more-circle" color="#fff" size="16"  ></u-icon>
					<view class="menu-text">常见问题</view>
				</view>
			</view>
			<view class="list-cell  " @click="handleAbout">
				<view class="menu-item-box">
					<!-- <view class="iconfont icon-aixin menu-icon"></view> -->
					<u-icon name="server-man" color="#fff" size="18"  ></u-icon>
					<view class="menu-text">关于我们</view>
				</view>
			</view>

			<view class="list-cell  " @click="handleToSetting">
				<view class="menu-item-box">
					<!-- <view class="iconfont icon-setting menu-icon"></view> -->
					<u-icon name="setting" color="#fff" size="16"  ></u-icon>
					<view class="menu-text">应用设置</view>
				</view>
			</view>
		<!-- 	<view class="list-cell  " @click="handleToPopScienceList">
							<view class="menu-item-box">
								<view class="iconfont icon-list menu-icon"></view>
								<view>科普列表</view>
							</view>
			</view>
			<view class="list-cell  " @click="handleToScan">
							<view class="menu-item-box">
								<view class="iconfont icon-list menu-icon"></view>
								<view>扫码</view>
							</view>
			</view> -->
			<!-- <view class="list-cell  " @click="handleToIndex">
				<view class="menu-item-box">
					<view class="iconfont icon-service menu-icon"></view>
					<view>返回首页</view>
				</view>
			</view> -->
		</view>

	</view>
	</view>
</template>

<script>
	import storage from '@/utils/storage'
	import CustomNavbar from '@/components/custom-navbar/custom-navbar.vue';
	
	export default {
		data() {
			return {
				name: this.$store.state.user.name,
				version: getApp().globalData.config.appInfo.version
			}
		},
		components: {
		    'custom-navbar': CustomNavbar
		  },
		onLoad() {
			// 页面加载时隐藏 TabBar
			uni.hideTabBar({
				animation: false // 是否需要动画效果
			});
		},
		onUnload() {
			// 页面卸载时显示 TabBar
			uni.showTabBar({
				animation: false // 是否需要动画效果
			})
		},
		computed: {
			avatar() {
				console.log(this.$store.state.user.avatar);
				return this.$store.state.user.avatar
			},
			windowHeight() {
				return uni.getSystemInfoSync().windowHeight - 50
			}
		},
		methods: {
			handleBack() {
				//uni.navigateBack(); // 执行返回操作
				this.$tab.reLaunch('/pages/index')
				return false;
				// 自定义返回逻辑
				uni.showModal({
					title: '提示',
					content: '确定要返回吗？',
					success: function(res) {
						if (res.confirm) {
							console.log('用户点击确定');
							uni.navigateBack(); // 执行返回操作
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			handleToInfo() {
				this.$tab.navigateTo('/pages/mine/info/index')
			},
			handleToPopScienceList() {
				this.$tab.navigateTo('/pages/vist/list')
			},
			handleToIndex() {
				//this.$tab.navigateTo('/pages/index')
				this.$tab.reLaunch('/pages/index')
			},
			handleToScan(){
				this.$tab.navigateTo('/pages/vist/scan')
			},
			handleToEditInfo() {
				this.$tab.navigateTo('/pages/mine/info/edit')
			},
			handleToSetting() {
				this.$tab.navigateTo('/pages/mine/setting/index')
			},
			handleToLogin() {
				this.$tab.reLaunch('/pages/login')
			},
			handleToAvatar() {
				this.$tab.navigateTo('/pages/mine/avatar/index')
			},
			handleLogout() {
				this.$modal.confirm('确定注销并退出系统吗？').then(() => {
					this.$store.dispatch('LogOut').then(() => {
						this.$tab.reLaunch('/pages/index')
					})
				})
			},
			handleHelp() {
				this.$tab.navigateTo('/pages/mine/help/index')
			},
			handleAbout() {
				this.$tab.navigateTo('/pages/mine/about/index')
			},
			handleWeixin() {
				this.$modal.showToast('微信：①sarurifan、②sarurifan2')
			},
			handleBuilding() {
				this.$modal.showToast('模块构建中~')
			}
		}
	}
</script>

<style lang="scss">
	body {}

	page {

		background-image: url('/static/images/userbg.png');
	}

	uni-app {
		background-color: #6db87b;
	}

	uni-page-wrapper {}

	.mine-container {
		width: 100%;
		height: 100%;

		.hello {
			margin-left: 15px;
			color: #fff;
			padding-bottom: 40px;

			.title {
				font-size: 30px;
				line-height: 80px;
				font-weight: normal;
			}

			.sub-title {
				font-size: 24px;
			}
		}


		.menu-list {
			width: 50%;
			float: flex;

			.list-cell {
				background: none;
				color: white;
			}

			.list-cell::befor {
				color: #6db87b;

			}

			.list-cell::after {
				color: #6db87b;
				border: none;
			}

			.list-cell-arrow::before {
				color: #6db87b;
			}

			.menu-icon {
				color: #fff;
			}
		}

		.header-section {
			padding: 0px 15px 0px 15px;
			background-color: #6db87b;
			color: white;

			.login-tip {
				font-size: 18px;
				margin-left: 10px;
			}

			.cu-avatar {
				border: 10px solid #97dea4;
				width: 200rpx;
				margin-top: -110rpx;

				.icon {
					font-size: 40px;
				}
			}

		.user-info {
		    margin-left: 0px;
		    margin-top: 0px;
		    padding: 10px 10px 0px 10px; /* 调整顶部 padding */
		    width: 200rpx;
		    text-align: center;
		    background-color: #97dea4;
		    height: 200rpx;
		    display: flex; /* 使用 Flexbox 布局 */
		    align-items: flex-start; /* 垂直靠顶部对齐 */
		    justify-content: center; /* 水平居中 */
		    flex-direction: column; /* 使子元素按列排列 */
		
		    .u_title {
		        font-size: 16px; /* 调整字体大小 */
		        line-height: 22px; /* 调整行高 */
		        white-space: normal; /* 允许文本换行 */
		        word-wrap: break-word; /* 当文本长度超过容器宽度时自动换行 */
		        text-align: center; /* 确保文本在容器内居中 */
				 margin-top: -50px;
				width: 100%;
				height: 50px;
		    }
		}


		}
		.menu-text{
			padding-left: 5px; line-height: 20px;
		}
		.content-section {
			position: relative;
			top: -50px;

			.mine-actions {
				margin: 15px 15px;
				padding: 20px 0px;
				border-radius: 8px;
				background-color: white;

				.action-item {
					.icon {
						font-size: 28px;
					}

					.text {
						display: block;
						font-size: 13px;
						margin: 8px 0px;
					}
				}
			}
		}
	}
</style>